<template>
  <wrapper>
    <view class="inner-wrapper">
      <view style="height:17px"></view>
      <view class="realname-block" style=" margin: 0 16px 17px 16px;">
        <view class="realname-block-input-wrapper column">
          <view class="zjzhangpain">证件照片</view>
          <view class="realname-block-upload-wrapper">
            <view class="realname-block-upload" @tap="upload('positive', 'front')">
              <view class="realname-block-upload-image-box">
                <image class="realname-block-upload-image" :src="positiveSrc" mode="aspectFit" />
              </view>
              <view class="realname-block-upload-tip">添加身份证正面</view>
            </view>
            <view class="realname-block-upload" @tap="upload('reverse', 'back')">
              <view class="realname-block-upload-image-box">
                <image class="realname-block-upload-image" :src="reverseSrc" mode="aspectFit" />
              </view>
              <view class="realname-block-upload-tip">添加身份证背面</view>
            </view>
          </view>
        </view>
      </view>
       <!-- 身份认证 -->
      <view class="block-wrapper">
        <view class="block-inner input">
          <view class="zjzhangpain">身份信息</view>
          <view class="block-input-wrapper border">
            <view class="block-input-label">姓名<text class="block-input-label required"></text></view>
            <input
              v-model="name"
              type="text"
              placeholder-style="font-size:14px;color:#C0C0C0"
              class="block-input"
              placeholder="请输入真实姓名"
            />
          </view>
          <view class="block-input-wrapper border">
            <view class="block-input-label">身份证<text class="block-input-label required"></text></view>
            <input
              v-model="idCard"
              type="text"
              placeholder-style="font-size:14px;color:#C0C0C0"
              class="block-input"
              placeholder="请输入身份证号"
            />
          </view>
          <view class="block-input-wrapper border">
            <view class="block-input-label">手机号<text class="block-input-label required"></text></view>
            <input
              placeholder-style="font-size:14px;color:#C0C0C0"
              v-model="phone"
              type="text"
              class="block-input"
              placeholder="请输入手机号"
            />
          </view>
          <view class="block-input-wrapper border" style="padding: 6px 0;">
            <view class="block-input-label">
              <text></text>民族
            </view>
            <u-input
              v-model="nation"
              :clearable="false"
              type="select"
              placeholder="请选择民族"
              style="width: 72%;"
              :readonly="true"
              placeholder-style="font-size:14px;color:#C0C0C0"
              @click="selectorShow = true"
            />
            <u-select
              v-model="selectorShow"
              :list="nationList"
              :confirmColor="$store.settings.theme"
              @confirm="actionSheetCallback"
            />
          </view>
          <view class="block-input-wrapper" style="align-items: end;">
            <view class="block-input-label">
              <text></text>备注
            </view>
            <u-input
              placeholder-style="font-size:14px;color:#C0C0C0"
              style="width: 72%;"
              v-model="remark"
              type="textarea"
              height="100"
              clearable="false"
              auto-height="true"
            />
          </view>
        </view>
      </view>
      <view style="height:120px"></view>
    </view>
    <view class="block-buttonBox">
      <view class="block-button" @tap="verifyIdCard">确认</view>
    </view>
  </wrapper>
</template>
<script>
import Wrapper from "@/components/Wrapper";
import { empInfosAdd, getByKey } from "./api";
import { uploadSiteImg, uploadSiteImgIdCard } from "@/services/common";
import { checkPhone, checkIdcard } from "@/utils/validate";
import request from "@/utils/request";
import { BASE_URL, HR_API, APPID, REDIRECT_URI } from "@/settings";
export default {
  name: "",
  components: {
    Wrapper
  },
  data() {
    return {
      codeInput:"",
      state: "",
      selectorShow: false,
      nationList: [],
      nationList1: "",
      positiveSrc: require("../static/shenfenzhengzheng.png"),
      reverseSrc: require("../static/shenfenzhengbei.png"),
    //   captureSrc: require("../../../images/renzhengbeijing.png"),
      positiveUrl: "",
      reverseUrl: "",
      captureUrl: "",
      bankUrl: "",
      faceUrl: "",
      name: "",
      idCard: "",
      cardNo: "",
      phone: "",
      nation: "",
      remark: "",
      openShow: "",
      codeVisible: false,
      code: "",
      stateVal: {}
    };
  },
  onLoad(options) {
    // options.params =
    //   "jsola:hr:manage:B42C8EBDD5224C63B1B88BDA270CB233:B924B0CEED6B493189A5D7B0EEAA02F6";
     console.log("options",options);
    if (options.params) {
      this.openShow = "QRCodeInvitation";
      getByKey({ key: options.params }).then(res => {
        this.stateVal = res;
      });
    } else {
      this.openShow = "home";
      this.stateVal=JSON.parse(options.siteObject)
    }
  },
  created() {
    this.nationList1 =
      "汉族,满族,蒙古族,回族,藏族,维吾尔族,苗族,彝族,壮族,布依族,侗族,瑶族,白族,土家族,哈尼族,哈萨克族,傣族,黎族,傈僳族,佤族,畲族,高山族,拉祜族,水族,东乡族,纳西族,景颇族,柯尔克孜族,土族,达斡尔族,仫佬族,羌族,布朗族,撒拉族,毛南族,仡佬族,锡伯族,阿昌族,普米族,朝鲜族,塔吉克族,怒族,乌孜别克族,俄罗斯族,鄂温克族,德昂族,保安族,裕固族,京族,塔塔尔族,独龙族,鄂伦春族,赫哲族,门巴族,珞巴族,基诺族";
    this.nationList = this.nationList1.split(",").map(i => {
      return {
        label: i,
        value: i
      };
    });
  },
  mounted() {},
  methods: {
    actionSheetCallback(e, index) {
      this.nation = e[0].value;
    },
    // 身份证实名认证
    verifyIdCard() {
      console.log(this.codeInput)
      uni.showLoading({
        mask: true,
        title: "认证中..."
      });
      if (!checkPhone(this.phone)) {
        uni.hideLoading();
        uni.showToast({
          title: "手机号错误",
          icon: "none",
          duration: 1500
        });
        return;
      }
      if (!this.name) {
        uni.hideLoading();
        uni.showToast({
          title: "姓名未填写",
          icon: "none",
          duration: 1500
        });
        return;
      }
       var regidCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (regidCard.test(this.idCard) === false) {
      // if (!checkIdcard(this.idCard)) {
        uni.hideLoading();
        uni.showToast({
          title: "身份证号填写错误，请填写正确的正确的身份证号",
          icon: "none",
          duration: 1500
        });
        return;
      }
      var myDate = new Date();
      var time = myDate
        .toLocaleDateString()
        .split("/")
        .join("-");
      const data = {
        source:  this.stateVal.type === 2 ? null : "预登记",
        name: this.name,
        idCard: this.idCard,
        phone: this.phone,
        remark: this.remark,
        postType: 5,
        channelId: this.stateVal.channelId,
        joinDate: this.getNowFormatDate(),
        turnStraightDate: this.getNowFormatDate(),
        idcardfront: this.positiveUrl,
        idcardback: this.reverseUrl,
        companyId: this.stateVal.companyId,
        nation: this.nation,
        annexIdCard:
          this.reverseUrl && this.positiveUrl
            ? `${this.reverseUrl},${this.positiveUrl}`
            : null,
        status: 1,
        formalType: 0,
        userId: this.stateVal.userId,
        operationUserId: this.stateVal.operationUserId,
        siteId: this.stateVal.siteId,
        code:this.stateVal.code
      };
      console.log("data", data, this.positiveUrl, this.reverseUrl);
      console.log("data", JSON.stringify(data));
      const url =
       this.stateVal.type === 2
          ? "/hr/api/v1/empInfos/saveEmpInfoAndRuleForMini"
          : "/hr/api/v1/checkInPeoples/saveForMini";
      console.log("url", url);
      request({
        url: `${BASE_URL}${url}`,
        method: "post",
        data
      })
        .then(res => {
          uni.hideLoading();
          console.log("debug log --> ", res);
          uni.showToast({
            title: "操作成功",
            icon: "none",
            duration: 1500
          });

          setTimeout(function() {
            /* global getCurrentPages:false */
            var pages = getCurrentPages();
            var prevPage = pages[pages.length - 2];
            uni.navigateBack({
              success: function() {
                prevPage.onLoad(); // 执行上一页的onLoad方法
              }
            });
          }, 1000);
        })
        .catch(err => {
          uni.hideLoading();
          console.log("debug log --> ", err);
          uni.showToast({
            title: "实名认证失败",
            icon: "none",
            duration: 1500
          });
        });
    },
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var seperator2 = ":";
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate =
        date.getFullYear() + seperator1 + month + seperator1 + strDate;

      return currentdate;
    },
    upload(type, e) {
      uni.chooseImage({
        count: 1,
        success: imageRes => {
          const tempFilePaths = imageRes.tempFilePaths;
          uni.showLoading({
            title: "文件上传中...",
            mask: true
          });
          // console.log("213", tempFilePaths[0]);
          // this[`${type}Url`] = tempFilePaths[0];
          console.log(tempFilePaths[0]);
          uploadSiteImgIdCard(tempFilePaths[0], e)
            .then(res => {
              const urlShow = res.url;
              console.log(urlShow);
              this[`${type}Url`] = `${urlShow}`;
              this[`${type}Src`] = `${urlShow}?token=${uni.getStorageSync(
                "token"
              )}`;
              console.log("213", `${type}Url`, this[`${type}Src`]);
              console.log("data", this.positiveUrl, this.reverseUrl);
              uni.hideLoading();
              if (JSON.stringify(res) !== "{}" && res.name) {
                this.name = res.name;
                this.idCard = res.idcard;
                this.nation = res.nation;
              }
            })
            .catch(err => {
              uni.hideLoading();
              uni.showToast({
                title: err.message,
                icon: "none",
                duration: 1500
              });
            });
        },
        fail: err => {
          uni.showToast({
            title: err.message,
            icon: "none",
            duration: 1500
          });
        }
      });
    }
  }
};
</script>
<style lang="scss">
.inner-wrapper {
  width: 100vw;
  min-height: 100vh;
  background: #f8f8f8;
  overflow-y: auto;
}
.realname-block {
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 16px;
  background-color: #ffffff;
  .realname-block-input-wrapper {
    display: flex;
    flex-direction: row;
    padding: 0;
    justify-content: space-between;
    color: #ccc;
    &.border {
      border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
    }
    &.column {
      flex-direction: column;
      justify-content: flex-start;
    }
    .borderLast {
      border-bottom: 0px;
    }
    .realname-block-input-label {
      &:before {
        content: "*";
        color: #fa5051;
        margin-right: 5px;
      }
    }
    .realname-block-input {
      text-align: right;
    }
    .realname-block-upload-wrapper {
      width: 100%;
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .realname-block-upload {
        width: 48%;
        box-sizing: border-box;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        overflow: hidden;
        .realname-block-upload-image {
          width: 100%;
          height: 78px;
          background-color: #f7f7f7;
          padding: 8px 16px;
          box-sizing: border-box;
        }
        .realname-block-upload-tip {
          width: 100%;
          color: #55565d;
          text-align: center;
          line-height: 24px;
          height: 24px;
          font-size: 12px;
          padding-bottom: 5px;
        }
      }
    }
  }
}
.block-wrapper {
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  &.nph {
    padding-left: 0;
    padding-right: 0;
  }
  &.pt {
    padding-top: 15px;
  }
  .block-inner {
    background-color: #ffffff;
    border-radius: 8px;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 16px;
    padding-top: 0;
    &.theme {
      background-color: #1890ff;
    }
    &.pt {
      padding-top: 15px;
    }
    &.input {
          padding-top: 13px;
    padding-bottom: 5px;
    }
    &.mt {
      margin-top: 15px;
    }
  }

  .block-tip {
    font-size: 12px;
    color: #999;
    line-height: 35px;
    padding: 0 10px;
    &.np {
      line-height: 1;
      padding: 0;
    }
  }
  .block-inner-content {
    margin-top: 15px;
    color: #999;
    font-size: 14px;
    line-height: 1.75;
  }
  .block-input-wrapper {
    display: flex;
    flex-direction: row;
    padding: 10px 0;
    justify-content: space-between;
    // color: #999;
    font-size: 14px;
    align-items: center;
    &.border {
      border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
    }
    &.column {
      flex-direction: column;
      justify-content: flex-start;
    }
    .borderLast {
      border-bottom: 0px;
    }
    .block-input-label {
      width: 80px;
      &.required {
        &:before {
          content: "*";
          color: #fa5051;
          margin-right: 5px;
        }
      }
    }
    .block-input {
      flex: 1;
      text-align: left;
      &.right {
        text-align: right;
      }
    }
    .xuanzerenlian {
      width: 100%;
      text-align: center;
      margin-top: 10px;
    }
    .block-input-tip {
      font-size: 12px;
      color: #666;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }
}
@import "./index.scss";
</style>
